<div id="chart{{name|default:'Main'}}"></div>
<script>
    var triggerMatchesChartOptions = {
        dataLabels: {
            enabled: false
        },
        tooltip: {
            shared: true,
            x: {
                format: '{{tooltip_format|default:"MMM d"}}',
            },
        },
        legend: {
            show: false,
        },
        chart: {
            zoom: {
                enabled: false,
            },
            toolbar: {
                show: false,
            },
            type: 'line',
            height: {{height|default:"200"}},
            offsetY: -1,
            animations: {
                enabled: false
            },
            sparkline: {
                enabled: {% if sparkline %}true{% else %}false{% endif %},
            },
            {% if granularity == "daily" and click_zoom %}
            events: {
                markerClick: function(event, chartContext, { seriesIndex, dataPointIndex, w: {config}}) {
                    const day = config.labels[dataPointIndex]
                    window.location.href = `?startDate=${day}&endDate=${day}`
                },
            },
            {% endif %}
        },
        grid: {
            padding: {
                right: 0,
                left: -8,
            },
            xaxis: {
                lines: {
                    show: true,
                }
            },
            yaxis: {
                lines: {
                    show: false,
                }
            },
            show: true
        },
        yaxis: {
            labels: {
                show: false,
                formatter: val => val.toFixed(0)
            },
            padding: {
                left: 0,
            }
        },
        xaxis: {
            type: "datetime",
            labels: {
                datetimeUTC: false
            },
        },
        stroke: {
            width: 2,
            curve: 'smooth',
        },
        series: [{
            name: "Hits",
            type: 'area',
            color: "#ddd6fe",
            data: {{data.hits|safe}}
        }, {
            name: "Sessions",
            type: 'line',
            color: "#805AD5",
            data: {{data.sessions|safe}}
        }],
        labels: {{data.labels|safe}}
    };
    var triggerMatchesChart = new ApexCharts(document.querySelector("#chart{{name|default:'Main'}}"), triggerMatchesChartOptions);
    triggerMatchesChart.render();
</script>
